<!-- src/views/PhoneBinding.vue -->
<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          绑定手机
        </CardTitle>
        <CardDescription class="text-muted-foreground">
          绑定手机可以用来登录您的账号与找回密码
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form @submit.prevent="handleSubmit" class="space-y-4">
          <div>
            <Label for="phone">手机号码</Label>
            <Input id="phone" v-model="phone" type="tel" placeholder="请输入手机号码" />
          </div>
          <div class="flex space-x-2">
            <Input v-model="verificationCode" placeholder="验证码" />
            <Button @click="sendVerificationCode" :disabled="cooldown > 0">
              {{ cooldown > 0 ? `${cooldown}s后重试` : "发送验证码" }}
            </Button>
          </div>
          <Button type="submit">绑定手机</Button>
        </form>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardDescription
} from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

const phone = ref("");
const verificationCode = ref("");
const cooldown = ref(0);

const sendVerificationCode = () => {
  // 实现发送验证码的逻辑
  cooldown.value = 60;
  const timer = setInterval(() => {
    cooldown.value--;
    if (cooldown.value === 0) {
      clearInterval(timer);
    }
  }, 1000);
};

const handleSubmit = () => {
  // 实现提交绑定手机的逻辑
  console.log(
    "Binding phone:",
    phone.value,
    "with code:",
    verificationCode.value,
  );
};
</script>
